<template>
  <div class="delete" style="margin:0;padding:0;">
    <div class="slider">
      <div
        @click="cli"
        class="content"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        :style="deleteSlider"
      >
        <!-- 插槽中放具体项目中需要内容 -->
        <slot name="img"></slot>
        <slot name="icon"></slot>
        <slot name="title"></slot>
        <slot name="price"></slot>
        <!-- 默认插槽 -->
        <slot></slot>
      </div>
      <div class="delte" ref="delte">asdf</div>
      <div class="remove" ref="remove">
        <div style="background:#ff61b5" @click="deleteLine">加入重要</div>
        <div style="background:#ffb462" @click="deleteLine">加入亲友</div>
        <div style="background:#e7fa67" @click="deleteLine">加入商友</div>
        <div style="background:#bafa62" @click="deleteLine">加入恋友</div>
        <div style="background:#49fefc" @click="deleteLine">加入秘密</div>
        <div style="background:#ff5c5e" @click="deleteLine">删除</div>
        <div style="background:#bcbcbc" @click="deleteLine">收藏</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["index"],
  components: {},
  data() {
    return {
      startX: 0, //触摸位置
      endX: 0, //结束位置
      moveX: 0, //滑动时的位置
      disX: 0, //移动距离
      deleteSlider: "", //滑动时的效果,使用v-bind:style="deleteSlider"
    };
  },
  methods: {
    cli() {
      this.$emit("cli");
    },
    touchStart(ev) {
      ev = ev || event;
      //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
      if (ev.touches.length == 1) {
        // 记录开始位置
        this.startX = ev.touches[0].clientX;
      }
    },
    touchMove(ev) {
      ev = ev || event;
      //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
      let wd = this.$refs.remove.offsetWidth;
      if (ev.touches.length == 1) {
        // 滑动时距离浏览器左侧实时距离
        this.moveX = ev.touches[0].clientX;
        //起始位置减去 实时的滑动的距离，得到手指实时偏移距离
        this.disX = this.startX - this.moveX;
        //console.log(this.disX)
        // 如果是向右滑动或者不滑动，不改变滑块的位置
        if (this.disX < 0 || this.disX == 0) {
          this.deleteSlider = "transform:translateX(0px)";
        } else if (this.disX > 0) {
          // 大于0，表示左滑了，此时滑块开始滑动
          //具体滑动距离我取的是 手指偏移距离*5。
          this.deleteSlider = "transform:translateX(-" + this.disX * 5 + "px)";
          // 最大也只能等于删除按钮宽度
          if (this.disX * 5 >= wd) {
            this.deleteSlider = "transform:translateX(-" + wd + "px)";
          }
        }
      }
    },
    touchEnd(ev) {
      ev = ev || event;
      let wd = this.$refs.remove.offsetWidth;
      if (ev.changedTouches.length == 1) {
        let endX = ev.changedTouches[0].clientX;
        this.disX = this.startX - endX;
        //console.log(this.disX)
        //如果距离小于删除按钮一半,强行回到起点
        if (this.disX * 5 < wd / 2) {
          this.deleteSlider = "transform:translateX(0px)";
        } else {
          //大于一半 滑动到最大值
          this.deleteSlider = "transform:translateX(-" + wd + "px)";
        }
      }
    },
    deleteLine() {
      this.deleteSlider = "transform:translateX(0px)";
      this.$emit("deleteLine");
    }
  }
};
</script>
<style scoped lang="scss">
.slider {
  width: 100%;
  height: 75px;
  position: relative;
}
.content {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  transition: 0.3s;
  background-color: #fff;
  border-bottom: 1px solid #d3d3d3;
}
.remove {
  position: absolute;
  width: 290px;
  height: 75px;
  right: 0;
  top: 0;
  overflow: hidden;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    width: 14.28%;
    text-overflow: ellipsis;
    height: 74px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: normal;
  }
}
.delte{
  position: absolute;
  width: 290px;
  height: 75px;
  right: 0;
  top: 0;
  overflow: hidden;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    width: 14.28%;
    text-overflow: ellipsis;
    height: 74px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: normal;
  }
}
</style>